<template>
  <div class="my-answer__warp">
    <div class="my-answer">
      <div class="title">这个是问题的标题</div>
      <div class="content">
        <p class="content-secondary">我的回答<span v-if="isAdopt">(已解决)</span></p>
        <p class="content-main">这个是回答的内容</p>
      </div>
      <div class="footer">
        <span class="footer-timer">2019-02-20 14:20</span>
        <div>
          <span>评论</span>
          <span>20</span>
        </div>
        <div>
          <span>赞</span>
          <span>50</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "myAnswer",
  props: {
    info: Object
  },
  data(){
    return{
      isAdopt: false,
    }
  }
}
</script>

<style lang="scss" scoped>
.my-answer__warp{
  background-color: #fff;
  .my-answer{
    @extend %cursorPointer;
    text-align: left;
    box-sizing: border-box;
    width: 938*$length;
    padding: 21*$length 24*$length;
    border-bottom: 1px dashed #EFEFEF;
    &:hover{
      > .title{
        color: #00AAE6;
      }
    }
    > .title{
      @extend %animate-transition;
      @include fontStyle(18,25,500,#222,left);
    }
    .content{
      margin-top: 12*$length;
      margin-bottom: 11*$length;
      .content-secondary{
        padding-bottom: 6*$length;
        @include fontStyle(12,17,500,#999,left);
        > span{
          color: #75D098;
        }
      }
      .content-main{
        width: 890*$length;
        @include fontStyle(14,20,500,#333,left);
        @extend %nowrap;
      }
    }
    .footer{
      @include fontStyle(12,17,500,#999,left);
      .footer-timer{
        margin-right: 32*$length;
      }
      div{
        display: inline-block;
        margin-right: 32*$length;
      }
    }
  }
}
</style>
